<template>
  <!-- <view class="gmat-page-statistics">
    <view>
      全部{{ memberCount.counNum }}人，审核中{{ memberCount.reviewed }}人，已报名{{
        memberCount.passed
      }}人
    </view>
    <view class="add-btn">添加</view>
  </view> -->
  <Paglist v-model="dataList" :is-init-api="false" :parame="parame" @register="register">
    <template v-for="v in dataList" :key="v.id">
      <GmatItem
        :avatar="v.avatar"
        :user-name="v.userName"
        :company-position="v.companyPosition"
        :approval-status="v.approvalStatus"
        @click="toApply(v)"
      />
    </template>
  </Paglist>
  <TButtonGroup position="fixed">
    <TButton
      text="添加成员"
      type="primary"
      :customStyle="{ width: 'calc(100vw - 60rpx)' }"
      @click="addMember"
    />
  </TButtonGroup>
</template>

<script lang="ts" setup>
  /**  GmatPage  代报名 */
  import { navigateTo } from '@/router';
  import { provide, reactive, ref, watchEffect } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { appRegistration } from '@/api/activity';
  import type { IAppRegistrationData, IAppRegistrationRes } from '@/api/activity/types';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { propTypes } from '@/utils/propTypes';
  import GmatItem from './GmatItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const props = defineProps({
    activityId: propTypes.number,
  });

  const stop = watchEffect(() => {
    const id = props.activityId;
    if (id) {
      parame.activityId = id;
      // memberCount.activityId = id;
      // __init();
      refresh?.();
      stop();
    }
  });

  let callback!: () => void;
  const dataList = ref<IAppRegistrationRes[]>([]);
  const parame = reactive<IAppRegistrationData>({
    current: 1,
    size: 10,
    activityId: 0,
  });

  provide('api', async (obj: IAppRegistrationData) => {
    const r = await appRegistration(obj);
    // memberCount.counNum = r.total;
    return r;
  });

  const [register, { refresh }] = useConList();
  const { userInfo } = useUserStoreWithOut();

  const toApply = (item: IAppRegistrationRes) => {
    navigateTo({
      name: 'signUpInfoConfirm',
      options: {
        activityId: parame.activityId,
        registerType: 'agent',
        applicantInfo: {
          phonenumber: item.phonenumber,
          userName: item.userName,
          companyPosition: item.companyPosition,
          companyName: item.companyName,
        },
        success: () => {
          refresh?.();
          if (userInfo.phonenumber === item.phonenumber) {
            callback?.();
          }
        },
      },
    });
  };

  function addMember() {
    navigateTo({
      name: 'membershipEdit',
      options: {
        callback: refresh,
      },
    });
  }

  // const memberCount = reactive<IAppMemberCountRes>({
  //   activityId: 0,
  //   counNum: 0,
  //   reviewed: 0,
  //   passed: 0,
  // });

  // function __init() {
  //   appMemberCount({ activityId: parame.activityId }).then((r) => {
  //     if (r) {
  //       memberCount.reviewed = r.reviewed;
  //       memberCount.passed = r.passed;
  //     }
  //   });
  //   uni.stopPullDownRefresh();
  // }

  // onPullDownRefresh(() => __init());
</script>

<style lang="scss" scoped>
  .gmat-page {
    &-statistics {
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      color: #aaabab;
      font-size: 23rpx;

      .add-btn {
        color: #4489ff;
        height: 100%;
        line-height: 70rpx;
      }
    }
  }
</style>
